<template>
	<view>
		<!-- 普通弹窗 background-color="#ffffff" -->
		<uni-popup ref="popup" type="center">
			<view>
				<view class="w-pop" style="background: #ffffff;">
					<view class="base-title">客服信息</view>
					<view class="item-box">
						<view class="label-box">客服电话：</view>
						<input type="text" placeholder="*请填写客服电话" class="inp-box" v-model="formData.customerMobile">
					</view>
					<view class="item-box">
						<view class="label-box">客服微信号：</view>
						<input type="text" placeholder="*请填写客服微信号" class="inp-box" v-model="formData.customerWechat">
					</view>
					<view class="item-box">
						<view class="label-box">微信客服二维码：</view>
						<view>
							<uni-file-picker limit="1" :imageStyles="imageStyles" :auto-upload="false"
								v-model='fileLists' @select="selectImg">
								<view class="pick">
									+
								</view>
							</uni-file-picker>
						</view>
					</view>
					<view class="flex item-center btn-box">
						<view class="cancal-btn" @click="showPop(false)">取消</view>
						<view class="submit-btn" @click="submit">保存</view>
					</view>
				</view>
			</view>

		</uni-popup>
	</view>
</template>

<script setup>
	import {
		useUserStore
	} from '@/stores/modules/user.js'
	import {
		ref,
		reactive,
		defineEmits,
		computed
	} from 'vue';
	import {
		uploadFileApi
	} from '@/api/common.js'
	import {
		updateCustomInfo
	} from '@/api/auth.js'
	import {
		checkPhoneNumber
	} from '@/utils/index.js'
	const userStore = useUserStore()
	let userInfo = computed(() => {
		return userStore.userInfo || {}
	})
	const emit = defineEmits(['refresh'])
		const formData = ref({
			customerMobile: '',
			customerWechat: '',
			customerWechatUrl: ''
		})
	const popup = ref()
	const showPop = async (value) => {
		if (value) {
			formData.value.customerMobile = userInfo.value.customerMobile
			formData.value.customerWechat = userInfo.value.customerWechat
			formData.value.customerWechatUrl = userInfo.value.customerWechatUrl
			if (userInfo.value.customerWechatUrl) {
				var url = userInfo.value.customerWechatUrl
				var lastOf = url.lastIndexOf('/') // '/'所在的最后位置
				var str = url.substr(lastOf + 1) //截取文件名称和后缀   输出：挽风.jpg
				var strUrl = url.substr(0, lastOf) //截取路径字符串    输出：http://localhost:5613/static
				var pName = str.substring(0, str.lastIndexOf(".")) //截取文件名   输出：挽风
				var suffix = url.substring(url.lastIndexOf(".")) //截取后缀   输出：.jpg
				var suffixType = url.substring(url.lastIndexOf(".") + 1) //截取后缀名  输出：jpg
				fileLists.value = [{
					"name": str,
					"extname": suffixType,
					url: userInfo.value.customerWechatUrl
				}]
			}
			popup.value && popup.value.open('center')
		} else {
			popup.value && popup.value.close()
		}
	}
	const imageStyles = reactive({
		width: 80,
		height: 80,
		border: {
			radius: 12,
			color: 'rgba(51,51,51,.61)',
			style: 'dashed'
		}
	})
	let fileLists = ref([])
	const selectImg = async (e) => {
		let tempFiles = e.tempFiles[0]
		let files = e.tempFilePaths
		let result = await uploadFileApi(0, {
			filePath: files[0],
			name: 'file'
		})
		if (result.data) {
			let item = {
				url: result.data,
				name: tempFiles.name,
				extname: tempFiles.extname
			}
			fileLists.value = [item]
		} else {
			uni.showToast({
				icon: 'none',
				title: result.message
			})
		}
	}
	const submit = async () => {
		if (!formData.value.customerMobile && !formData.value.customerWechat && !fileLists.value.length) {
			uni.showToast({
				icon: 'none',
				title: '请至少填写一项客服信息'
			})
			return
		}
		if(formData.value.customerMobile){
			if(!checkPhoneNumber(formData.value.customerMobile)){
				uni.showToast({
					icon: 'none',
					title: '请填写正确的手机号'
				})
				return
			}
		}
		formData.value.customerWechatUrl = fileLists.value[0]?fileLists.value[0].url:''
		let result = await updateCustomInfo(formData.value)
		if (result) {
			uni.showToast({
				icon: 'none',
				title: '修改成功'
			})
			userStore.getUserInfo()
			emit('refresh')
			showPop(false)
		} else {
			uni.showToast({
				icon: 'none',
				title: '保存失败'
			})
		}
	}
	defineExpose({
		showPop
	})
</script>

<style scoped lang="scss">
	.pick {
		font-size: 40px;
		// font-weight: 400;
		color: rgba(51, 51, 51, .61);
	}

	.w-pop {
		background: #fffff;
		border-radius: 8px;
		padding: 20px 0px 0 0px;
		width: 320px;
	}

	.base-title {
		font-size: 20px;
		font-weight: 600;
		line-height: 28px;
		margin-bottom: 10px;
		text-align: center;
	}

	.item-box {
		margin: 10px 20px;
	}

	.label-box {
		font-size: 14px;
		font-weight: 600;
		line-height: 20px;
		color: rgba(51, 51, 51, 1);
		margin: 6px 0;
	}

	.inp-box {
		background: rgba(245, 245, 245, 1);
		height: 44px;
		border-radius: 12px;
		padding: 0 10px;
		line-height: 44px;
		border: 1px solid rgba(245, 245, 245, 1);

		&.unactive {
			border-color: #FA4543;
		}
	}

	.btn-box {
		border-top: 1px solid rgba(0, 0, 0, 0.1);
		margin-top: 20px;
		line-height: 40px;
	}

	.cancal-btn {
		width: 50%;
		font-family: PingFang SC;
		font-size: 16px;
		font-weight: 400;
		// line-height: 24px;
		text-align: center;
		color: rgba(51, 51, 51, 0.6);
		border-right: 1px solid rgba(0, 0, 0, 0.1);
	}

	.submit-btn {
		width: 50%;
		font-family: PingFang SC;
		font-size: 16px;
		font-weight: 400;
		// line-height: 24px;
		text-align: center;
		color: rgba(250, 69, 67, 1);
	}
</style>